<template>
  <el-card class="filter-container" shadow="never">
    <div>
      <i class="el-icon-menu"></i>
      <span>优惠券历史列表</span>
    </div>
  <div>

    <div style="margin: 10px">
      <el-input style="width:200px" suffix-icon="el-icon-search" placeholder="优惠券码" v-model="couponCode"></el-input>
      <el-button style="margin-left: 5px" type="primary" @click="load">搜索</el-button>
      <el-button type="warning" @click="reset">重置</el-button>
    </div>

    <template>
      <el-table :data="tableData" border>
        <el-table-column prop="couponCode" label="优惠券码" width="60" align="center">
        </el-table-column>
        <el-table-column prop="memberNickname" label="会员名称" width="125" align="center">
        </el-table-column>
        <el-table-column prop="getType" label="领取方式" align="center">
          <template slot-scope="scope">
          <span v-if="scope.row.getType==0">
            <div class="status-icon icon1"></div>后台赠送
          </span>
            <span v-if="scope.row.getType==1">
            <div class="status-icon icon1"></div>主动获取
          </span>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="领取时间" align="center">
        </el-table-column>
        <el-table-column prop="useStatus" label="当前状态" align="center">
          <template slot-scope="scope">
          <span v-if="scope.row.useStatus==0">
            <div class="status-icon icon1"></div>未使用
          </span>
            <span v-if="scope.row.useStatus==1">
            <div class="status-icon icon1"></div>已使用
          </span>
            <span v-if="scope.row.useStatus==2">
            <div class="status-icon icon1"></div>已过期
          </span>
          </template>
        </el-table-column>
        <el-table-column prop="useTime" label="使用时间" align="center">
        </el-table-column>
        <el-table-column prop="orderSn" label="订单编号" align="center">
        </el-table-column>
      </el-table>
    </template>

    <div style="padding: 10px 0">
      <el-pagination
          :page-sizes="[5,10,15,20]"
          :page-size="pageSize"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
  </div>
  </el-card>
</template>

<script>
export default {
  name: "CouponHistory",
  data(){
    return {
      total:0,
      pageNum:1,
      pageSize:10,
      tableData: [],
      couponCode:"",
      dialogFormVisible:false,
      multipleSelection:[],
      form:{},

    }
  },
  created(){
    this.load()
  },
  methods:{
    load(){
      //请求查询数据
      this.request.get("/couponhistories/page",{
        params:{
          pageNum:this.pageNum,
          pageSize:this.pageSize,
          couponCode:this.couponCode,
          couponId:this.$route.params.couponId
        }
      }).then(res =>{
        console.log(res)
        this.tableData = res.records
        this.total = res.total
      })
    },
    handleSizeChange(pageSize) {
      console.log(pageSize)
      this.pageSize = pageSize
      this.load()
    },
    handleCurrentChange(pageNum) {
      console.log(pageNum)
      this.pageNum = pageNum
      this.load()
    },
    reset() {
      this.name = ""
      this.load()
    }
  }
}
</script>

<style scoped>

</style>